<template>
    <div class="message_list">
        <dl class="msg_list" v-for="(item, key) in msgList" :key="key" @click="examine()">
            <dt class="msg_tit" :class="item.msgStatus == 0 ? 'over' : ''">
                {{item.msgTitle}}
                <span class="dian" v-if="item.msgStatus == 0 ? true : false"></span>
            </dt>
            <dd class="msg_details">{{item.msgContent}}</dd>
            <dd class="msg_time">{{item.createTime}}</dd>
        </dl>
        <blank :title="'暂无消息'" v-if="msgList.length == 0"/>
    </div>
</template>

<script>
import blank from '@/components/masterInfo/blank'
export default {
    name: 'messageList',
    components: {
        blank
    },
    data() {
        return {
            msgList: [],
        }
    },
    methods: {
        MessagesList() { // 获取消息列表
            let params = {
                userId: this.$store.state.userId,
                msgType: this.$route.query.type
            }
            this.$http.fetchGet('MessagesList', params).then(res => {
                if(res.code == 200) {
                    this.msgList = res.data
                } else {
                    console.log(res.msg)
                }
            }, err => {
                console.log(err)
            })
        },
        examine() {
            let paths = this.$route.query.type
            if(paths == 1 || paths == 2) {
                this.$router.push({
                    path: this.$store.state.isMaster ? '/masterOrder?type=1,2&key=0' : '/orderForm?type=1,2&key=0' 
                })
            } else if (paths == 3) {
                this.$router.push({
                    path: this.$store.state.isMaster ? '/masterOrder?type=3&key=0' : '/orderForm?type=3&key=0'
                })
            }
        }
    },
    mounted() {
        this.MessagesList();
    }
}
</script>

<style lang="less" scoped>
    .message_list{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: #f2f2f2;
        .msg_list{
            .padd(20, 20);
            .mb(20);
            background: #fff;
            .msg_tit{
                .f28;
                .lh(60);
                overflow: hidden;
                text-overflow:ellipsis;//文本溢出显示省略号
                white-space:nowrap;//文本不会换行（单行文本溢出）
            }
            .over{
                font-weight: 700;
                .dian{
                    .w(15);
                    .h(15);
                    display: inline-block;
                    background: red;
                    border-radius: 50%;
                    .ml(20);
                    .mb(5); 
                }
            }
            .msg_details{
                .lh(60);
                .f26;
            }
            .msg_time{
                .lh(60);
                color: #ccc;
            }
        }
    }
</style>
